import React,{useEffect,useState} from 'react';
import { Table, Button, notification, Input, Modal, Card, Form,Select } from 'antd'
import { useNavigate } from 'react-router-dom';
import { useSelector,useDispatch } from 'react-redux';
import { sheet_list,name_search,department_search } from '../../../../api/sheetApi/api';
interface Props{}
function Sheet(props:Props) {
    const { Search } = Input
    const [form] = Form.useForm()
    var [sheetList,setSheet] = useState([])
    var [searchList1,setSearch1] = useState([])
    var [searchList2,setSearch2] = useState([])
    var navigate = useNavigate()
    useEffect(()=>{
        sheet_list().then((res)=>{
            console.log(res.data);
            setSheet(res.data)
        })
    },[])
    // 删除信息
    var del = (record:any)=>{
     
    }
    // 搜索名字信息
   var onSearch = (val:any)=>{
     if(val == ''){
        notification.info({message:'搜索信息不能为空'})
     }else{
        name_search({worker:val}).then((res)=>{
            console.log(res.data);
            setSearch1(res.data)
            
        })
     }

   }
     // 搜索部门信息
     var onSearch1 = (val:any)=>{
        if(val == ''){
           notification.info({message:'搜索信息不能为空'})
        }else{
            department_search({department:val}).then((res)=>{
               console.log(res.data);
               setSearch2(res.data)
               
           })
        }
   
      }
    //  点击跳转详情页
    var dispatch = useDispatch()
    var routerinfo = (record:any)=>{
        navigate({pathname:'/index/checknav/userinfo',search:`id=${record.jobnumber}`})
    }
    

  //决定了每一列渲染什么数据
  const columns = [
    {
        title: '员工头像',
        dataIndex: 'img',
        key: 'img',
        render: (_:any, record:any, index:any) => (
            <>
                <img src="https://cdn7.axureshop.com/demo/2004033/images/%E8%8A%B1%E5%90%8D%E5%86%8C/u3683.png"/>
            </>
        )
    },
    {
        title: '员工姓名',//表格列的名字(显示在表格头上)
        key: 'rolename',
        dataIndex: 'worker',//数据对应的属性名
        render: (text: string,record:any) => (<span style={{color:"#1677ff",cursor:'pointer'}} onClick={()=>{routerinfo(record)}}>{text}</span>)

    },
    {
        title: '员工工号',
        dataIndex: 'jobnumber',
        key: 'number',

    },
    {
        title: '部门',
        dataIndex: 'department',
        key: 'sector',

    },
    {
        title: '职位',
        dataIndex: 'work',
        key: 'work',

    },
    {
        title: '出勤天数',
        dataIndex: 'day',
        key: 'day',

    },
    {
        title: '出勤时长',
        dataIndex: 'hour',
        key: 'hour',

    },
    {
        title: '操作',
        key: 'action',
        render: (_:any, record:any, key:any) => (
            <>
                <Button type="primary" className='info'  onClick={() => { routerinfo(record) }} >详情</Button>
            </>
        )
    }
]
sheetList = searchList1.length == 0 ? sheetList : searchList1
sheetList = searchList2.length == 0 ? sheetList : searchList2
return (
    <div className='clockin'>
         {/* <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
            <Breadcrumb.Item>账号管理</Breadcrumb.Item>
            <Breadcrumb.Item>管理员列表</Breadcrumb.Item>
        </Breadcrumb> */}
         <Card title="月考勤表" bordered={false} >
        {/* 表格组件 */}
        {/* columns 表格每一列如何渲染 */}
        {/* dataSource 表格的数据源 */}
        <div className='button'>
        <Search style={{ width: 300, marginRight: 20 ,marginLeft: 20,marginBottom:20 }} placeholder="输入员工名称" enterButton onSearch={onSearch}  />

        <Search style={{ width: 300, marginRight: 20 ,marginLeft: 20,marginBottom:20 }} placeholder="输入部门名称" enterButton onSearch={onSearch1}  />
        
        </div>
            <Table columns={columns} dataSource={sheetList}/>
         </Card>
    </div>
    );
}

export default Sheet;